<template>
  <div class="search-container animate__animated animate__fadeIn">
    <div class="search-header">
      <h1 class="search-title">搜索结果: <span class="keyword">{{ keyword }}</span></h1>
    </div>
    
    <div class="search-tabs">
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'article' }"
        @click="navigateToTab('article')"
      >
        <t-icon name="book" class="tab-icon" />
        <span>文章</span>
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'question' }"
        @click="navigateToTab('question')"
      >
        <t-icon name="help-circle" class="tab-icon" />
        <span>问题</span>
      </div>
      <div 
        class="tab-item" 
        :class="{ active: activeTab === 'user' }"
        @click="navigateToTab('user')"
      >
        <t-icon name="user" class="tab-icon" />
        <span>用户</span>
      </div>
    </div>
    
    <div class="search-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import 'animate.css';

const route = useRoute();
const router = useRouter();

const keyword = computed(() => route.params.keyword);
const activeTab = computed(() => {
  const path = route.path;
  if (path.includes('/article')) return 'article';
  if (path.includes('/question')) return 'question';
  if (path.includes('/user')) return 'user';
  return 'article'; // Default tab
});

const navigateToTab = (tab) => {
  router.push(`/home/search/${keyword.value}/${tab}`);
};

// Watch for keyword changes to update the search
watch(() => route.params.keyword, (newKeyword) => {
  console.log('Search keyword changed:', newKeyword);
});

onMounted(() => {
  console.log('Search component mounted with keyword:', keyword.value);
});
</script>

<style scoped>
.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.search-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;
  position: relative;
}

.search-title {
  font-size: 28px;
  color: #2c3e50;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.keyword {
  color: #409eff;
  position: relative;
  padding: 0 4px;
}

.keyword::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(64, 158, 255, 0.2);
  z-index: -1;
  border-radius: 4px;
}

.search-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: none;
  background-color: #f9fafc;
  border-radius: 10px;
  padding: 5px;
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: 500;
  color: #606266;
  flex: 1;
  text-align: center;
}

.tab-item:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.08);
}

.tab-item.active {
  color: #ffffff;
  background-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
  transform: translateY(-2px);
}

.tab-icon {
  margin-right: 10px;
  font-size: 18px;
}

.search-content {
  min-height: 500px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>
